import React, { Component, PropTypes } from 'react';
import { WingBlank, WhiteSpace, List, Modal, Button } from 'antd-mobile';
import { routerRedux } from 'dva/router';
import styles from './styles.less';

const DoctorListPage = ({ dispatch, doctors, location, ...rest }) => {
  const scan = () => {
    dispatch(
      routerRedux.push({
         pathname: `/newdoctor`,
         state: { title: '新的医生'},
      }),
    );
  };
  return (
    <WingBlank size="md">
      <WhiteSpace />
      <List className={styles.doctorList}>
        <List.Item
          thumb={require('../../assets/icons/icon-doctor-add.svg')}
          onClick={scan}>
          新的医生
      </List.Item>
        {doctors.map(doctor =>
          <List.Item
            key={doctor.doctorId}
            thumb={doctor.Thumbnail || require('../../assets/icons/icon-doctor-thumb.svg')}
            onClick={() => dispatch(routerRedux.push({
              pathname: `${location.pathname}/${doctor.doctorId}`,
              state: {
                doctorId: doctor.doctorId,
                doctor: doctor.name,
              },
            }))}
            >
              {doctor.name}
              <List.Item.Brief>
                <span>{doctor.department}</span>
                <span>{doctor.expert}</span>
                <span>{doctor.title}</span>
              </List.Item.Brief>
          </List.Item>
        )}
        <WhiteSpace />
      </List>
    </WingBlank>
  );
};

export default DoctorListPage;